<template>
  <div class="search-container">
    <div class="search-header">
      <h2>搜索结果</h2>
      <div class="search-info">
        <span>搜索 "{{ searchKeyword }}"</span>
        <span>共 {{ totalResults }} 个结果</span>
      </div>
    </div>

    <div class="search-filters">
      <el-radio-group v-model="filterType" size="small">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="movie">电影</el-radio-button>
        <el-radio-button label="tv">电视剧</el-radio-button>
        <el-radio-button label="variety">综艺</el-radio-button>
      </el-radio-group>
      
      <el-select v-model="sortBy" size="small" style="width: 120px">
        <el-option label="相关度" value="relevance" />
        <el-option label="最新" value="newest" />
        <el-option label="最热" value="popular" />
      </el-select>
    </div>

    <div class="search-results">
      <VideoCard
        v-for="video in searchResults"
        :key="video.id"
        :video="video"
        @play="playVideo"
      />
    </div>

    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        :page-size="pageSize"
        :total="totalResults"
        layout="prev, pager, next"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import VideoCard from '@/components/common/VideoCard.vue'

const route = useRoute()
const router = useRouter()

const searchKeyword = computed(() => route.query.q as string || '')
const filterType = ref('all')
const sortBy = ref('relevance')
const currentPage = ref(1)
const pageSize = ref(20)
const totalResults = ref(100)

const searchResults = ref([
  { id: 1, title: '搜索结果1', cover: '/covers/search1.jpg', duration: '45:30', views: '1.2万' },
  { id: 2, title: '搜索结果2', cover: '/covers/search2.jpg', duration: '32:15', views: '8.5千' },
  { id: 3, title: '搜索结果3', cover: '/covers/search3.jpg', duration: '28:45', views: '5.3千' },
  { id: 4, title: '搜索结果4', cover: '/covers/search4.jpg', duration: '52:10', views: '2.1万' },
  { id: 5, title: '搜索结果5', cover: '/covers/search5.jpg', duration: '41:20', views: '9.8千' },
  { id: 6, title: '搜索结果6', cover: '/covers/search6.jpg', duration: '38:55', views: '7.6千' }
])

onMounted(() => {
  if (!searchKeyword.value) {
    router.push('/')
  }
})

const playVideo = (video: any) => {
  router.push({
    path: '/player',
    query: { url: video.id }
  })
}

const handlePageChange = (page: number) => {
  currentPage.value = page
  // 这里应该重新加载数据
}
</script>

<style lang="scss" scoped>
.search-container {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.search-header {
  margin-bottom: 20px;

  h2 {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .search-info {
    color: #b3b3b3;
    display: flex;
    gap: 16px;
  }
}

.search-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.pagination {
  display: flex;
  justify-content: center;
}
</style>
